<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>轮播图</title>
	<link rel="shortcut icon" type='images/-icon' href="./favicon.ico">
	<style>
		div#outer{
			width: 400px;
			height: 150px;
			border:1px solid red;
			margin:0 auto;
			overflow: hidden;
		}

		div.move{
			width:2000px;
			height: 150px;
			background-color: red;

			animation-name: move;
			animation-duration: 10s;
			animation-timing-function: steps(5);
			animation-iteration-count: infinite;
		}
		div.move div{
			width: 400px;
			height: 150px;
			float: left;
			color: #fff;
			font-size: 40px;
		}


		@keyframes move{
			form{
				margin-left: 0px;
			}
			to{
				margin-left: -2000px;
			}
		}

	</style>
</head>
<body>
	<div id="outer">
		<div class="move">
			<div style="background:red">div1</div>
			<div style="background:blue">div2</div>
			<div style="background:green">div3</div>
			<div style="background:orange">div4</div>
			<div style="background:pink">div5</div>
		</div>
	</div>
</body>
</html>




